<template>
  <el-dialog
    v-bind="$attrs"
    width="1000px"
    :title="dialogForm.id ? '修改应用' : '新增应用'"
    center
  >
    <el-form
      ref="dialogFormRef"
      :model="dialogForm"
      :rules="rules"
      label-width="auto"
    >
      <el-form-item label="应用编码" prop="applicationCode">
        <el-input v-model="dialogForm.applicationCode" />
      </el-form-item>
      <el-form-item label="应用名称" prop="applicationName">
        <el-input v-model="dialogForm.applicationName" />
      </el-form-item>
      <el-form-item label="应用URL" prop="applicationUrl">
        <el-input v-model="dialogForm.applicationUrl" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="onclose()">取消</el-button>
        <el-button type="primary" @click="submit(false)" v-if="isDetail"
          >修改</el-button
        >
        <el-button type="primary" @click="submit(true)" v-if="!isDetail">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import { defineComponent, reactive, ref, toRefs, watch, computed } from "vue";
import Editor from "@/components/Editor/index.vue";
import FileUpload from "@/components/FileUpload/index.vue";
import { apiUrl } from "@/api/api";
import axios from "axios";
import { ElMessage } from "element-plus";

export default defineComponent({
  components: { Editor, FileUpload },
  props: {
    dataForm: Object,
    isDetail: {
      type: Boolean,
      default: false,
    },
    isFabu: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }) {
    const dialogFormRef = ref();
    const dataMap = reactive({
      dialogForm: {},
      rules: {
        applicationCode: [
          { required: true, message: "请输入应用编码", trigger: "blur" },
        ],
        applicationName: [
          { required: true, message: "请输入应用名称", trigger: "blur" },
        ],
        applicationUrl: [
          { required: true, message: "请输入应用URL", trigger: "blur" },
        ],
      },
    });
    const methodsMap = reactive({
      onclose() {
        emit("close");
      },
      submit(flag) {
        if (flag) {
          dialogFormRef.value.validate((valid) => {
            if (valid) {
              let data = {};
              data = dataMap.dialogForm;
              let params = {};
              params.data = data;
              params.rid = "";
              axios({
                method: "post",
                url: apiUrl.baseUrl + "/wl/auth/application/create",
                data: params,
                headers: {
                  "Content-Type": "application/json;charset=UTF-8",
                  loginToken: sessionStorage.getItem("loginToken"),
                },
              })
                .then((response) => {
                  setTimeout(() => {
                    emit("getDatas");
                    emit("close");
                  }, 500);
                })
                .catch((error) => {});

              // delete params.fileList;
              // yyglCreate(params).then((res) => {
              //   console.log("新增成功", Date.now());
              //   setTimeout(() => {
              //     emit("getDatas");
              //     emit("close");
              //   }, 500);
              // });
            } else {
              return;
            }
          });
        } else {
          dialogFormRef.value.validate((valid) => {
            if (valid) {
              let data = {};
              data = dataMap.dialogForm;
              let params = {};
              params.data = data;
              params.rid = "";
              axios({
                method: "post",
                url: apiUrl.baseUrl + "/wl/auth/application/save",
                data: params,
                headers: {
                  "Content-Type": "application/json;charset=UTF-8",
                  loginToken: sessionStorage.getItem("loginToken"),
                },
              })
                .then((response) => {
                  setTimeout(() => {
                    emit("getDatas");
                    emit("close");
                  }, 500);
                })
                .catch((error) => {});
            } else {
              return;
            }
          });
        }
      },
    });
    onMounted(() => {
      if (props.dataForm) {
        let temp = JSON.parse(JSON.stringify(props.dataForm));
        dataMap.dialogForm = {
          ...temp,
        };
      }
    });
    return {
      ...toRefs(dataMap),
      ...toRefs(methodsMap),
      dialogFormRef,
    };
  },
});
</script>
